<template>
	<view class="fee_main">
		<view class="fee_main_bgBox">
			<uni-forms ref="formRef" label-width="150" :model="orderFeeVo">
				<view class="item_fee">
					<view class="title_heade">基本信息</view>
					<uni-forms-item label="申请类型">
						<view class="item_content">
							<span>
								<uni-data-checkbox
									@change="changeTypeFn"
									v-model="orderFeeVo.type"
									:localdata="orderFeeVoTypeList"
								/>
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="出库仓" v-if="orderFeeVo.type == 2">
						<view class="item_content">
							{{
								engineerStoreObj?.enableStore
									? engineerStoreObj?.storeName
									: '无仓库'
							}}
							<!-- <span style="width: 66%;"><uni-data-select v-model="orderFeeVo.networkSpareType"
									:clear="false" :localdata="SpareTypeList" /></span> -->
						</view>
					</uni-forms-item>
					<uni-forms-item label="收货地址类型">
						<view class="item_content">
							<span>
								<uni-data-checkbox
									@change="addressChange"
									v-model="orderFeeVo.receiptAddrType"
									:localdata="addressTypeList"
								/>
							</span>
						</view>
					</uni-forms-item>
				</view>
				<view
					class="item_fee"
					v-for="(item, index) in orderFeeVo.spareMaterialVos"
					:key="index"
				>
					<view class="item_fee_tableHead">
						<view
							class="item_fee_tableHead_left"
							@click="item.isShow = !item.isShow"
						>
							<span :class="item.isShow ? 'down_up_' : 'down_up'"></span>
							配件{{ index + 1 }}
						</view>
						<uni-icons
							@click="deleteFun(index)"
							v-if="orderFeeVo.spareMaterialVos.length == 1 ? false : true"
							type="minus-filled"
							color=" rgba(245, 108, 108, 1)"
							size="24"
						></uni-icons>
					</view>
					<view v-if="!item.isShow">
						<!-- 隐藏 -->
						<!-- 	<uni-forms-item label="结算类型">
							<view class="item_content">
								<span style="width: 50%;"><uni-data-select
										@change="changeType(index)" v-model="item.type" :clear="false"
										:localdata="typeList"></uni-data-select></span>
										</view>
						</uni-forms-item> -->
						<uni-forms-item
							required
							:name="['spareMaterialVos', index, 'name']"
							label="配件名称"
							:rules="[{required: true, errorMessage: '请选择配件'}]"
						>
							<view class="item_content">
								<span
									v-if="item.name"
									@click="showSpare(index)"
									class="content_name"
								>
									{{ item.name }}
								</span>
								<span @click="showSpare(index)" class="input_pl" v-else>
									请选择
								</span>
								<uni-icons type="down" color="#999" size="14"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="图号">
							<view class="item_content">
								<span class="content_name">{{ item.model }}</span>
							</view>
						</uni-forms-item>
						<uni-forms-item
							:name="['spareMaterialVos', index, 'specName']"
							label="规格"
						>
							<view class="item_content">
								<span
									v-if="item.specName"
									@click="showSpareSpec(index, item.spareId)"
									class="content_name"
								>
									{{ item.specName }}
								</span>
								<span
									class="input_pl"
									v-else
									@click="showSpareSpec(index, item.spareId)"
								>
									请选择
								</span>
								<uni-icons type="down" color="#999" size="14"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="可用库存" v-if="orderFeeVo.type == 2">
							<span class="item_content">{{ item.numStore }}</span>
						</uni-forms-item>
						<uni-forms-item label="申请数量">
							<span class="item_content">
								<uni-number-box :min="1" v-model="item.qty" />
							</span>
						</uni-forms-item>
						<!-- 厂家承担 -->
						<uni-forms-item label="单价金额" v-if="item.type == 1">
							<view class="item_content" v-if="item.isChangePrice">
								<span class="input_with_span">
									￥
									<uni-easyinput
										class="input_with"
										type="digit"
										:clearable="false"
										placeholder="0.00"
										@input="
											(val) =>
												nextTick(() => (item.price = amountForamt(val, 8, 2)))
										"
										v-model="item.price"
									></uni-easyinput>
								</span>
							</view>
							<span class="item_content" v-else>
								￥{{ item.price.toFixed(2) }}
							</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type == 1">
							<span class="item_content" style="font-weight: bold">
								￥{{ (item.price * item.qty).toFixed(2) }}
							</span>
						</uni-forms-item>
						<!-- 客户收取-->
						<uni-forms-item label="单价金额" v-if="item.type == 2">
							<view class="item_content" v-if="item.isChangePrice">
								<span class="input_with_span">
									￥
									<uni-easyinput
										class="input_with"
										type="digit"
										:clearable="false"
										placeholder="0.00"
										@input="
											(val) =>
												nextTick(
													() =>
														(item.customerUndertakePrice = amountForamt(
															val,
															8,
															2,
														)),
												)
										"
										v-model="item.customerUndertakePrice"
									></uni-easyinput>
								</span>
							</view>
							<span class="item_content" v-else>
								￥{{ item.customerUndertakePrice.toFixed(2) }}
							</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type == 2">
							<span class="item_content" style="font-weight: bold">
								￥{{ (item.customerUndertakePrice * item.qty).toFixed(2) }}
							</span>
						</uni-forms-item>
						<!-- 支付服务商 -->
						<uni-forms-item label="单价金额" v-if="item.type == 3">
							<view class="item_content" v-if="item.isChangePrice">
								<span class="input_with_span">
									￥
									<uni-easyinput
										class="input_with"
										type="digit"
										:clearable="false"
										placeholder="0.00"
										@input="
											(val) =>
												nextTick(
													() =>
														(item.networkUndertakePrice = amountForamt(
															val,
															8,
															2,
														)),
												)
										"
										v-model="item.networkUndertakePrice"
									></uni-easyinput>
								</span>
							</view>
							<span class="item_content" v-else>
								￥{{ item.networkUndertakePrice.toFixed(2) }}
							</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type == 3">
							<span class="item_content">
								￥{{ (item.networkUndertakePrice * item.qty).toFixed(2) }}
							</span>
						</uni-forms-item>
						<uni-forms-item label="">
							<span style="color: #606266; font-size: 28rpx">备注</span>
							<view class="text_input">
								<uni-easyinput
									type="textarea"
									:inputBorder="false"
									placeholderStyle="font-size:28rpx;"
									:maxlength="100"
									v-model="item.remark"
									placeholder="填写备注"
								></uni-easyinput>
								<view class="coun">{{ item.remark.length }}/100</view>
							</view>
						</uni-forms-item>
						<uni-forms-item :name="['spareMaterialVos', index, 'imgarr']">
							<view class="pic_img">
								<uni-file-picker
									@select="(files) => onsuccessImg(files, index)"
									title="图片"
									limit="8"
									:auto-upload="false"
									@delete="(file) => ondeleteImg(file, index)"
									file-extname="jpg,jpeg,png"
									:imageStyles="imageStyles"
									file-mediatype="image"
									v-model="item.imgarr"
								/>
							</view>
						</uni-forms-item>
					</view>
				</view>
				<view class="item_fee">
					<uni-forms-item label="收货人姓名">
						<view class="item_content">
							<span class="content_name">{{ orderFeeVo.receiptName }}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收货人手机">
						<view class="item_content">
							<span class="content_name">{{ orderFeeVo.receiptPhone }}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收货人地址">
						<view class="item_content">
							<span class="content_name">
								{{
									orderFeeVo.receiptProvince +
									orderFeeVo.receiptCity +
									orderFeeVo.receiptArea +
									orderFeeVo.receiptTown
								}}
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="详细地址">
						<view
							class="item_content"
							style="
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-end;
								padding-left: 48rpx;
							"
						>
							{{ orderFeeVo.receiptAddress }}
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="footer_order">
			<view class="footer_order_left" @click="addFeeItem">
				<uni-icons type="plus-filled" color="#007cff" size="28"></uni-icons>
				<p class="gray_tip">添加配件</p>
			</view>
			<view class="footer_order_right" @click="submitFun">
				<view class="btn">提交申请</view>
			</view>
		</view>
		<!-- 搜索配件 -->
		<uni-popup ref="popupSpareRef" :safe-area="false" type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">配件搜索</view>
					<uni-icons
						type="clear"
						size="28"
						color="#ccc"
						@click="popupSpareRef.close()"
					></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar
						class="search_card_bar"
						@confirm="searchMobileSpareSelectList"
						placeholder="关键词搜索"
						radius="100"
						bg-color="rgba(242, 243, 245, 1)"
						cancelButton="none"
						:focus="false"
						v-model="selectVoSpare.name"
						@input="input"
						@clear="clear"
					></uni-search-bar>
					<view class="search_btn">搜索</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="spareList.length == 0">
						暂未查询到配件
					</view>
					<view
						v-for="(item, index) in spareList"
						:key="index"
						class="search_muen_item"
						@click="onSpareItem(item)"
					>
						<view class="" style="padding-bottom: 4rpx">
							编号：{{ item.code }}
						</view>
						名称：{{ item.name }}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 搜索规格 -->
		<uni-popup ref="popupSpareSpecRef" :safe-area="false" type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">规格搜索</view>
					<uni-icons
						type="clear"
						size="28"
						color="#ccc"
						@click="popupSpareSpecRef.close()"
					></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar
						class="search_card_bar"
						@confirm="OrderSpareSpecSelectList"
						placeholder="关键词搜索"
						radius="100"
						bg-color="rgba(242, 243, 245, 1)"
						cancelButton="none"
						:focus="false"
						v-model="selectVoSpareSpec.name"
						@input="inputSpec"
						@clear="clearSpec"
					></uni-search-bar>
					<view class="search_btn">搜索</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="SpareSpecList.length == 0">
						暂未查询到规格
					</view>
					<view
						v-for="(item, index) in SpareSpecList"
						:key="index"
						class="search_muen_item"
						@click="onSpareSpecItem(item)"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch, nextTick} from 'vue';
	import _ from 'lodash';
	import {
		onReachBottom,
		onPullDownRefresh,
		onUnload,
		onShow,
		onLoad,
		onHide,
	} from '@dcloudio/uni-app';
	import apiOrder from '@/util/network_api/apiOrder.js';
	import apiUpload from '@/util/network_api/upload.js';
	import {amountForamt} from '@/util/autoInputValue';
	import apiParts from '@/util/network_api/parts.js';
	const workId = ref(null); //工单Id
	const formRef = ref();
	onLoad(async (e) => {
		if (!e.workId) return;
		workId.value = e.workId;
		new Promise(() => {
			getUserAddress();
		});
	});
	onUnload(() => {
		uni.hideLoading();
	});
	const imageStyles = {
		height: 80, // 边框高度
		width: 80, // 边框宽度
		border: {
			// 如果为 Boolean 值，可以控制边框显示与否
			color: '#eee', // 边框颜色
			width: '1px', // 边框宽度
			style: 'solid', // 边框样式
		},
	};
	const orderFeeVo: any = ref({
		delSpareMaterialIds: [],
		networkSpareType: 1,
		receiptAddrType: 1,
		receiptAddress: '',
		receiptArea: '',
		receiptCity: '',
		receiptName: '',
		receiptPhone: '',
		receiptProvince: '',
		receiptTown: '',
		remark: '',
		spareMaterialVos: [
			{
				delImageIds: [],
				images: [],
				model: '', //物料型号
				name: '',
				overinsured: true, //物料质保状态：false-保内，true-保外
				price: 0,
				// payNetworkPrice: 0,
				// receiveFactoryPrice: 0,
				customerUndertakePrice: 0, //收取客户费用
				networkUndertakePrice: 0,
				qty: 1,
				remark: '',
				spareId: null, //物料备件ID
				specId: null, //备件规格ID
				specName: '', //备件规格名称
				specSku: '', //	商品规格编号
				type: 1,
				isShow: false,
				isChangePrice: false,
				imgarr: [],
				numStore: 0,
			},
		],
		type: 1, //申请类型：1-商家/总部配件，2-外部配件,示例值(1)
		userOrNetworkId: 0,
		workId: 0,
	});
	const engineerStoreObj = ref();
	const changeTypeFn = (val) => {
		if (val.detail.value == 2) {
			getEngineerStoreObj();
		}
	};
	// 获取工程师仓下拉
	const getEngineerStoreObj = () => {
		apiParts.getEngineerStore().then(async (res) => {
			if (res.code == 20000) {
				engineerStoreObj.value = res.data.row;
				if (engineerStoreObj.value?.storeId) {
					for (let i = 0; i < orderFeeVo.value.spareMaterialVos.length; i++) {
						if (orderFeeVo.value.spareMaterialVos[i].specId) {
							orderFeeVo.value.spareMaterialVos[i].numStore =
								await getSpareStoreStock(orderFeeVo.value.spareMaterialVos[i]);
						}
					}
				}
			}
		});
	};
	// 获取可用库存数量
	const getSpareStoreStock = async (item) => {
		let data = {
			storeId: engineerStoreObj.value.storeId,
			goodsId: item.spareId,
			goodsSpecId: item.specId,
		};
		let num = 0;
		await apiParts.getSpareStoreStock(data).then((res) => {
			if (res.code == 20000) {
				num = res.data.row?.availableStock;
			}
		});
		return num;
	};
	const onsuccessImg = (files, index) => {
		files.tempFiles.map((o) => {
			orderFeeVo.value.spareMaterialVos[index].imgarr.push(o);
		});
	};
	const ondeleteImg = (file, index) => {
		orderFeeVo.value.spareMaterialVos[index].imgarr =
			orderFeeVo.value.spareMaterialVos[index].imgarr.filter((o) => {
				return o.uuid != file.tempFile.uuid;
			});
	};
	// 结算类型
	const typeList = ref([
		{text: '厂家承担费用', value: 1},
		{text: '收取客户费用', value: 2},
		{text: '支付服务商费用', value: 3},
	]);
	// 申请类型
	const orderFeeVoTypeList = ref([
		{text: '保内配件', value: 1},
		{text: '外部配件', value: 2},
	]);
	// 收货地址类型
	const addressTypeList = ref([
		{text: '工单客户', value: 1},
		{text: '服务商', value: 2},
	]);
	// 服务商配件类型
	const SpareTypeList = ref([
		{text: '服务商-外部仓配件', value: 1},
		{text: '工程师-外部仓配件', value: 2},
		{text: '自购配件', value: 3},
	]);
	// 添加费用
	const addFeeItem = () => {
		let result = orderFeeVo.value.spareMaterialVos.every((o) => o.spareId);
		let indexShow = orderFeeVo.value.spareMaterialVos.some((o) => o.isShow);
		if (!result && indexShow) {
			uni.showToast({
				title: '请先选择配件',
				icon: 'none',
			});
			return;
		}
		formRef.value
			.validate()
			.then(() => {
				orderFeeVo.value.spareMaterialVos.push({
					delImageIds: [],
					images: [],
					model: '',
					name: '', //配件名称
					overinsured: true, //物料质保状态：false-保内，true-保外
					price: 0,
					payNetworkPrice: 0,
					customerUndertakePrice: 0,
					qty: 1,
					remark: '',
					spareId: null, //物料备件ID
					specId: null, //备件规格ID
					specName: '', //备件规格名称
					specSku: '', //	商品规格编号
					type: 1, //	1-商家收取，2-厂家承担,示例值(1)
					isShow: false,
					isChangePrice: false,
					imgarr: [],
					numStore: 0,
				});
			})
			.catch((err) => {
				uni.showToast({
					title: '请填写完整信息！',
					icon: 'none',
				});
			});
	};

	// 删除费用
	const deleteFun = (index) => {
		orderFeeVo.value.spareMaterialVos.splice(index, 1);
	};
	// 提交
	const submitFun = _.debounce(
		async () => {
			if (!workId.value) return;
			let result = orderFeeVo.value.spareMaterialVos.every((o) => o.spareId);
			let indexShow = orderFeeVo.value.spareMaterialVos.some((o) => o.isShow);
			if (!result && indexShow) {
				uni.showToast({
					title: '请先选择配件',
					icon: 'none',
				});
				return;
			}
			await formRef.value
				.validate()
				.then(async (res) => {
					uni.showLoading({
						title: '加载中...',
						mask: true,
					});
					for (let i = 0; i < orderFeeVo.value.spareMaterialVos.length; i++) {
						let item = orderFeeVo.value.spareMaterialVos[i];

						if (orderFeeVo.value.spareMaterialVos[i].price === null) {
							orderFeeVo.value.spareMaterialVos[i].price = 0;
						}

						item.images = [];
						if (item.imgarr.length > 0) {
							for (let j = 0; j < item.imgarr.length; j++) {
								let img = item.imgarr[j];
								await apiUpload
									.uploadOrderFile({files: img.file})
									.then((res) => {
										item.images.push({id: null, image: res.data.rows[0]});
									});
							}
						}
					}
					orderFeeVo.value.workId = workId.value;
					let dataObj = _.cloneDeep(orderFeeVo.value);
					dataObj.spareMaterialVos = dataObj.spareMaterialVos.map((o) => {
						delete o.imgarr;
						delete o.isShow;
						delete o.isChangePrice;
						return o;
					});
					await apiOrder.saveApplySpare(dataObj).then((res) => {
						if (res.code == 20000) {
							uni.hideLoading();
							uni.showToast({
								title: '申请配件',
								icon: 'success',
							});
							uni.setStorageSync('order_detail', 1);
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages_network/order/detail?workId=' + workId.value,
								});
							}, 600);
						}
					});
					uni.hideLoading();
				})
				.catch((err) => {
					uni.showToast({
						title: '请填写完整信息！',
						icon: 'none',
					});
				});
		},
		800,
		{leading: false},
	);
	// *********配件***********
	// 获取配件列表下拉
	const spareList = ref([]);
	const popupSpareRef = ref(); //配件列表ref
	const selectVoSpare = ref({
		limit: 0,
		name: '',
		page: 0,
	});
	// 搜索列表
	const searchMobileSpareSelectList = async () => {
		uni.showLoading({
			title: '搜索中...',
			mask: true,
		});
		selectVoSpare.value.name = selectVoSpare.value.name.trim();
		await apiOrder
			.getMobileSpareSelect(selectVoSpare.value, workId.value)
			.then((res) => {
				spareList.value = res.data.rows;
			});
		uni.hideLoading();
	};
	const clear = () => {
		selectVoSpare.value.name = '';
		searchMobileSpareSelectList();
	};
	const input = _.debounce(
		() => {
			if (!selectVoSpare.value.name) return;
			searchMobileSpareSelectList();
		},
		800,
		{leading: false},
	);
	// 配件搜索列表
	const indexOnItem = ref(); //记录配件费用位置
	const showSpare = (index) => {
		searchMobileSpareSelectList();
		popupSpareRef.value.open();
		indexOnItem.value = index;
	};
	const onSpareItem = async (item) => {
		// if (item.id == orderFeeVo.value.spareMaterialVos[indexOnItem.value].spareId) return
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].name = item.name;
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].spareId = item.id;
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].model = item.model;

		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specName = '';
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specId = '';
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specSku = '';
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].price = 0;
		orderFeeVo.value.spareMaterialVos[
			indexOnItem.value
		].customerUndertakePrice = 0;
		orderFeeVo.value.spareMaterialVos[
			indexOnItem.value
		].networkUndertakePrice = 0;
		spareId.value = item.id;
		indexSpecOnItem.value = indexOnItem.value;
		await OrderSpareSpecSelectList();
		if (SpareSpecList.value.length > 0) {
			onSpareSpecItem(SpareSpecList.value[0]);
		}
		popupSpareRef.value.close();
	};
	// **********规格***********
	const popupSpareSpecRef = ref();
	const SpareSpecList = ref([]);
	const selectVoSpareSpec = ref({
		limit: 0,
		name: '',
		page: 0,
	});
	const OrderSpareSpecSelectList = async () => {
		uni.showLoading({
			title: '搜索中...',
			mask: true,
		});
		selectVoSpareSpec.value.name = selectVoSpareSpec.value.name.trim();
		await apiOrder
			.getOrderSpareSpecSelect(selectVoSpareSpec.value, spareId.value)
			.then((res) => {
				SpareSpecList.value = res.data.rows;
			});
		uni.hideLoading();
	};
	const clearSpec = () => {
		selectVoSpareSpec.value.name = '';
		OrderSpareSpecSelectList();
	};
	const inputSpec = _.debounce(
		() => {
			if (!selectVoSpareSpec.value.name) return;
			OrderSpareSpecSelectList();
		},
		600,
		{leading: false},
	);
	// 配件搜索列表
	const indexSpecOnItem = ref(0); //记录配件费用位置
	const spareId = ref('');
	const showSpareSpec = (index, id) => {
		if (!id) {
			uni.showToast({
				title: '请先选择配件',
				icon: 'none',
			});
			return;
		}
		spareId.value = id;
		indexSpecOnItem.value = index;
		OrderSpareSpecSelectList();
		popupSpareSpecRef.value.open();
	};
	// 点击规格
	const onSpareSpecItem = async (item) => {
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specName =
			item.name;
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specId = item.id;
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specSku =
			item.specSkuCode;
		orderFeeVo.value.spareMaterialVos[
			indexSpecOnItem.value
		].customerUndertakePrice = 0;
		orderFeeVo.value.spareMaterialVos[
			indexOnItem.value
		].networkUndertakePrice = 0;
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = 0;
		if (orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 1) {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price =
				item.price;
		} else if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 2
		) {
			orderFeeVo.value.spareMaterialVos[
				indexSpecOnItem.value
			].customerUndertakePrice = item.price;
		} else if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 3
		) {
			orderFeeVo.value.spareMaterialVos[
				indexSpecOnItem.value
			].networkUndertakePrice = item.price;
		}
		if (engineerStoreObj.value?.storeId) {
			let item2 = orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value];

			let num = await getSpareStoreStock(item2);
			nextTick(() => {
				orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].numStore = num;
			});
		}
		popupSpareSpecRef.value.close();
	};
	// ***点击结算类型变化
	const changeType = (index) => {
		let tmpprice = 0;
		if (orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price > 0) {
			tmpprice = orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price;
		}
		if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value]
				.customerUndertakePrice > 0
		) {
			tmpprice =
				orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value]
					.customerUndertakePrice;
		}
		if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value]
				.networkUndertakePrice > 0
		) {
			tmpprice =
				orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value]
					.networkUndertakePrice;
		}

		if (orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 1) {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = tmpprice;
		} else if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 2
		) {
			orderFeeVo.value.spareMaterialVos[
				indexSpecOnItem.value
			].customerUndertakePrice = tmpprice;
		} else if (
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 3
		) {
			orderFeeVo.value.spareMaterialVos[
				indexSpecOnItem.value
			].networkUndertakePrice = tmpprice;
		}
	};
	// ****获取地址****
	// 客户地址
	const getUserAddress = () => {
		apiOrder.getMobileWorkUserAddress(workId.value).then((res) => {
			if (res.code == 20000) {
				let row = res.data.row;
				orderFeeVo.value.receiptAddress = row.address;
				orderFeeVo.value.receiptArea = row.area;
				orderFeeVo.value.receiptCity = row.city;
				orderFeeVo.value.receiptName = row.name;
				orderFeeVo.value.receiptPhone = row.phone;
				orderFeeVo.value.receiptProvince = row.province;
				orderFeeVo.value.receiptTown = row.town;
				orderFeeVo.value.userOrNetworkId = row.id;
			}
		});
	};
	// 服务商地址
	const getNetworkAddress = () => {
		apiOrder.getMobileOrderNetworkAddress(workId.value).then((res) => {
			if (res.code == 20000) {
				let row = res.data.row;
				orderFeeVo.value.receiptAddress = row.address;
				orderFeeVo.value.receiptArea = row.area;
				orderFeeVo.value.receiptCity = row.city;
				orderFeeVo.value.receiptName = row.name;
				orderFeeVo.value.receiptPhone = row.phone;
				orderFeeVo.value.receiptProvince = row.province;
				orderFeeVo.value.receiptTown = row.town;
				orderFeeVo.value.userOrNetworkId = row.id;
			}
		});
	};
	const addressChange = (val) => {
		if (val.detail.value == 1) {
			getUserAddress();
		} else {
			getNetworkAddress();
		}
	};
</script>

<style lang="scss" scoped>
	.fee_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 220rpx;

			:deep(.uni-forms-item__label) {
				padding: 0;
				font-size: 28rpx;
			}

			.info_base {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;
			}

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.title_heade {
					padding: 12rpx 0;
				}

				:deep(.uni-forms-item) {
					margin-bottom: 0rpx;
					padding: 10rpx 0;
					border-bottom: 1px solid #eee;
				}

				:deep(.uni-select) {
					border: none;

					.uni-select__input-placeholder {
						text-align: right;
						margin-right: 12rpx;
						font-size: 28rpx;
						color: #999;
					}

					.uni-select__input-text {
						text-align: right;
						margin-right: 12rpx;
						font-size: 28rpx;
					}

					.uni-popper__arrow {
						left: 66%;
					}

					.uni-select__selector {
						top: 100%;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					&_left {
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
						align-items: center;

						.down_up {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-top: 14rpx solid #000;
							margin-right: 6rpx;
						}

						.down_up_ {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-bottom: 14rpx solid #000;
							margin-right: 6rpx;
						}
					}
				}

				.item_content {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;

					// border-bottom: 1px solid #eee;
					:deep(.checklist-box) {
						margin-left: 40rpx;
						margin-right: 0;

						.checklist-text {
							font-size: 28rpx;
						}
					}

					.input_pl {
						color: #999;
						width: 100rpx;
						font-size: 28rpx;
					}

					.content_name {
						flex: 1;
						text-align: right;
						width: 300rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-right: 12rpx;
						margin-left: 24rpx;
						font-size: 28rpx;
					}

					.input_with_span {
						display: flex;
						align-items: center;
					}

					:deep(.input_with) {
						.uni-easyinput__content {
							width: 220rpx !important;
						}
					}
				}

				.text_input {
					margin: 24rpx 0 0 0;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						// background-color: #fff !important;
					}

					padding: 12rpx 12rpx 24rpx;
					background-color: #fff;
					border: 2rpx solid rgb(243, 244, 248);

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}

				.pic_img {
					:deep(.file-title) {
						font-size: 28rpx;
					}

					:deep(.uni-file-picker__header) {
						padding-top: 24rpx;
					}

					:deep(.icon-add) {
						width: 30rpx;
						height: 3rpx;
						background-color: #aaa;
					}

					:deep(.icon-del) {
						width: 24rpx;
					}

					:deep(.icon-del-box) {
						width: 40rpx;
						height: 40rpx;
						top: 0;
						right: 0;
						background-color: rgba(0, 0, 0, 0.3);
					}

					:deep(.uni-progress-bar) {
						display: none;
					}
				}
			}
		}

		:deep(.file-picker__progress-item) {
			display: none;
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			z-index: 99;
			height: 140rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx 48rpx 60rpx;
			box-sizing: border-box;
			border-top: 1px solid #eee;

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.gray_tip {
					color: #007cff;
				}
			}

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.popup-content {
			height: 86vh;
			background-color: #ffffff;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			flex: 1;

			&_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 0;

				.title_tip {
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.search_card {
				display: flex;
				align-items: center;
				margin: 0 24rpx;

				&_bar {
					flex: 1;
				}

				.search_btn {
					font-size: 28rpx;
					color: #007cff;
					font-weight: bold;
				}
			}

			.search_muen {
				flex: 1;
				overflow: auto;
				margin: 24rpx;
				padding-bottom: 15%;

				&_item {
					font-size: 28rpx;
					border-bottom: 1rpx solid rgba(242, 243, 245, 1);
					padding: 20rpx 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.msg_kong {
					color: #999;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					height: 80%;
				}
			}
		}
	}
</style>
